<template>
  <div>

  <van-row gutter="10">
    <van-col span="3" style="padding-top: 20px;padding-left: 20px"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.qqkou.com%2Fi%2F0a1689344884x3991998886b26.jpg&refer=http%3A%2F%2Fi.qqkou.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666684746&t=9552d61da1d9bc54e39ff9c07caad3bc" style="width:40px"></van-col>
    <van-col span="2" style="padding-top: 35px;padding-left: 20px"></van-col>
    <van-col span="15" style="padding-top: 32px;font-size: 20px"><router-link to="/lin">未登录,点击登录</router-link></van-col>
    <van-col span="2" style="padding-top: 35px;"><van-icon name="arrow" /></van-col>
  </van-row>

    <van-grid gutter="20" column-num="3" :border="false">
      <van-grid-item style="padding-top: 20px;">
        <span>{{score}}</span>
        <span style="color: grey">积分</span>
      </van-grid-item>
      <van-grid-item style="padding-top: 20px">
        <span>{{stored}}</span>
        <span style="color: grey">储值</span>
      </van-grid-item>
      <van-grid-item style="padding-top: 20px">
        <span>{{collect}}</span>
        <span style="color: grey">收藏</span>
      </van-grid-item>

      <van-grid  column-num="5" :border="false" gutter="">
        <van-grid-item style="padding-top: 20px">
          <span><van-icon name="balance-pay" /></span>
          <span style="font-size: 12px">代付款</span>
        </van-grid-item>
        <van-grid-item style="padding-top: 20px">
          <span><van-icon name="cash-on-deliver" /></span>
          <span style="font-size: 12px">待发货</span>
        </van-grid-item>
        <van-grid-item style="padding-top: 20px">
          <span><van-icon name="logistics" /></span>
          <span style="font-size: 12px">待收货</span>
        </van-grid-item>
        <van-grid-item style="padding-top: 20px">
          <span><van-icon name="comment-o" /></span>
          <span style="font-size: 12px">待评价</span>
        </van-grid-item>
        <van-grid-item style="padding-top: 20px;width: 180px">
          <span><van-icon name="phone-o" /></span>
          <span style="font-size: 12px">售后</span>
        </van-grid-item>
      </van-grid>
    </van-grid>



<!--    优惠券-->
    <van-coupon-cell
        style="padding-top: 20px;padding-left: 40px;text-align: left"
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        @click="coupon"
        icon="coupon-o"
    />
    <!-- 优惠券列表 -->
    <van-popup
        v-model="couponBoolean"
        round
        position="bottom"
        style="height: 90%; padding-top: 4px;"
    >
      <van-coupon-list
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          :disabled-coupons="disabledCoupons"
          @change="onChange"
          @exchange="onExchange"
      />
    </van-popup>


<!--    收货地址-->
    <van-cell
        style="padding-top: 20px;padding-left: 40px;text-align: left"
        @click="addressBoolean = false"
        title="收货地址"
        icon="location-o"
    />
    <van-popup
        v-model="addressBoolean"
        round
        position="bottom"
        style="height: 90%; padding-top: 4px;"
    >
      <!--    收货地址-->
      <van-address-list
          v-model="chosenAddressId"
          :list="list"
          :disabled-list="disabledList"
          disabled-text="以下地址超出配送范围"
          default-tag-text="默认"
          @add="onAdd"
          @edit="onEdit"
      />
    </van-popup>





  </div>
</template>

<script>
const coupon = {
  available: 1,
  condition: '无使用门槛\n满100减30',
  reason: '',
  value: 150,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '30',
  unitDesc: '元',
};

export default {
  name: "MyView",

  data(){
    return{
      score:0,
      stored:0,
      collect:0,

      token:this.$store.state.token,
      //跳出层  默认为关  点击时显示 true  关闭时 false
      couponBoolean:false,

      addressBoolean:false,

      //选择优惠券索引 -1 默认为不选
      chosenCoupon: -1,
      //可用优惠券列表参数
      coupons: [],
      //不可用优惠券列表参数
      disabledCoupons: [coupon],

      //地址
      chosenAddressId: '1',
      list: [
        {
          id: '1',
          name: '张三',
          tel: '13000000000',
          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
          isDefault: true,
        },
        {
          id: '2',
          name: '李四',
          tel: '1310000000',
          address: '浙江省杭州市拱墅区莫干山路 50 号',
        },
      ],
      disabledList: [
        {
          id: '3',
          name: '王五',
          tel: '1320000000',
          address: '浙江省杭州市滨江区江南大道 15 号',
        },
      ],
    }





  },

  methods: {
    onChange(index) {
      this.couponBoolean = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
    onAdd() {
      this.$toast('新增地址');
    },
    onEdit(item, index) {
      this.$toast('编辑地址:' + index);
    },

    coupon(){
      this.couponBoolean = false;
      this.axios.get("/api/couponInfo/selectByUid?token="+this.token).then(res=>{
          if(res.data.code==200){
            var a={}
            for(var i in res.data.data){
              this.axios.get("/api/coupon/selectById?id="+res.data.data[i].coupid).then(res=>{
                if(res.data.code=200){
                  a.available = i;
                  a.condition = res.data.data.info;
                  a.reason = '';
                  a.value = res.data.data.discountprice * 100;
                  a.name = '优惠券名称';
                  a.startAt = 1489104000;
                  a.endAt = 1514592000;
                  a.valueDesc = res.data.data.discountprice;
                  a.unitDesc = '元';
                  this.coupons.push(a)
                }
              })
            }
          }
      })
    }
  }
}

</script>

<style scoped>

</style>